<template>
  <div class="content-manage">
    <el-scrollbar style="width: 100%">
      <div class="content-manage-container">
        <ContentCrumb />
        <div class="content-list">
          <h2 class="setting-header">
            <strong>我的收藏</strong>
          </h2>
          <el-tabs v-model="curState" @tab-change="handleTabChange">
            <el-tab-pane v-for="item in tabArr" :key="item.state" :label="item.name" :name="item.state" />
          </el-tabs>
          <SearchCmp ref="searchCmpRef" v-if="searchCmpArray.length" :searchCmpArray="searchCmpArray" :searchForm="queryData" @onSubmit="handleSearch" style="margin-bottom: 10px" />
          <!-- 表格样式 -->
          <div class="ruifox-list">
            <RuifoxTable
              :key="curState"
              :loading="tableLoading"
              v-model:tableData="tableData"
              v-model:fieldList="fieldList"
              :default-index="true"
              :tableProps="tableProps"
              @handleSearch="handleSearch"
            >
              <!-- 锁定 -->
              <template #is_lock="{ element }">
                <el-tag type="danger" v-if="element.is_lock">已锁定</el-tag>
                <el-tag type="success" v-else>未锁定</el-tag>
              </template>
              <!-- 创建时间 -->
              <template #create_time="{ element }">
                {{ dayjs(element.create_time).format('YYYY-MM-DD HH:mm:ss') }}
              </template>
              <template #options="{ element }">
                <div class="table-td-option">
                  <el-button type="primary" link @click="handleCollect(element)">取消收藏</el-button>
                </div>
              </template>
            </RuifoxTable>
          </div>
          <PaginationView
            :total="queryData.total"
            :pageSize="queryData.pageSize"
            :currentPage="queryData.currentPage"
            :allChoose="isAllChooseBtn"
            :pageChoose="isPageChooseBtn"
            :checkedNum="checkedNum"
            :canChoose="false"
            @changeSize="handleSizeChange"
            @currentChange="handleCurrentChange"
            @changePageChoose="handlePageChoose"
            @changeAllChoose="handleAllChoose"
            @cancelChoose="handleResetPagination"
            @invertChoose="handleInvertChoose"
            @refreshList="getTableData"
          />
        </div>
      </div>
    </el-scrollbar>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import { getMyCollect, collectContent } from '@/api/content'
import { tableList as mixTable } from '@ruifox-cms/utils'
import dayjs from 'dayjs'

// 分页逻辑局部混入
const {
  queryData,
  tableData,
  tableLoading,
  checkedNum,
  isAllChooseBtn,
  isPageChooseBtn,
  getTableData,
  handleSearch,
  handleCurrentChange,
  handleSizeChange,
  handlePageChoose,
  handleAllChoose,
  handleInvertChoose,
  handleResetPagination
} = mixTable({
  getListApi: getMyCollect
})

// 顶部tab及各状态可操作选项
const curState = ref(99)
const tabArr = reactive([
  { state: 99, name: '已发布' },
  { state: 0, name: '审核中' },
  { state: 1, name: '草稿箱' },
  { state: 2, name: '撤稿箱' },
  { state: 3, name: '已退稿' },
  { state: 4, name: '已归档' }
])

const searchCmpRef = ref(null)
const handleTabChange = () => {
  searchCmpRef.value.clearForm(queryData)
  searchCmpRef.value.showTags()
  queryData.state = curState.value
  handleResetPagination()
  getTableData()
}

// 表头数据处理
const fieldList = ref([
  {
    name: '标题',
    field: 'title',
    width: 450,
    fixed: 'left',
    showTextTip: true
  },
  {
    name: '来源栏目',
    field: 'category'
  },
  {
    name: '锁定状态',
    field: 'is_lock'
  },
  {
    name: '创建时间',
    field: 'create_time'
  },
  {
    name: '操作',
    field: 'options',
    width: 150,
    fixed: 'right'
  }
])

const tableProps = reactive({
  labelKey: 'name',
  valueKey: 'field'
})

const searchCmpArray = ref([{ label: '标题', key: 'title' }])

// 内容列表查询参数
const defaultQueryData = reactive({
  currentPage: 1,
  pageSize: 10,
  state: 99
})
Object.assign(queryData, defaultQueryData)

// 取消收藏
const handleCollect = async data => {
  const obj = {
    catId: data.cat_id,
    id: data.id,
    isCollect: false
  }
  const res = await collectContent(obj)
  if (res.code === 20000) {
    const msg = obj.isCollect ? '收藏成功' : '取消收藏成功'
    ElMessage.success(msg)
    getTableData()
  }
}

onMounted(async () => {
  getTableData()
})
</script>

<style lang="scss" scoped>
.content-manage {
  flex: 1;
  height: calc(100vh - 65px);
  .content-manage-container {
    flex: 1;
    padding: 10px;
  }
  .content-list {
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 0 5px rgba(#000, 0.1);
    width: 100%;
    margin-top: 15px;
    box-sizing: border-box;
    min-width: 650px;
    padding: 20px;
  }
}
</style>
